<template>
	<view>
		<!-- 隐藏的分享按钮，用于通过JS触发分享功能 -->
		<button ref="shareButton" open-type="share"
			style="position: fixed; left: -9999px; top: -9999px; opacity: 0;"></button>
		<view class="">
			<custom-navbar title="机构首页" :showBack="true"></custom-navbar>
		</view>
		<view class="bg">


			<!-- banner组件 -->
			<banner :bannerList="banner" />

			<!-- 分享按钮 -->
			<!-- 	<view class="share-container">
				<image class="share-image" src="/static/agency/share.png" mode="widthFix" @click="shareFunction">
				</image>
			</view> -->

			<!-- 机构信息组件 -->
			<agency-info :agencyId="shareId" @share="handleShare" open-type="share" :data-type="shareType"
				:data-id="shareId" />

			<!-- 机构功能模块 start -->
			<view class="function-total">
				<!-- 头部功能跳转模块 start -->
				<view class="function">
					<view class="function-model" v-for="item in utilityList" :key="item.id"
						@click="navigateToInsDetails(item.url,item.id)">
						<view class="function-model-img">
							<image class="function-model-img-img" :src="item.img" mode="widthFix"></image>
						</view>

					</view>

				</view>
				<!-- 头部功能跳转模块 start -->
				<!-- 功能模块列表 start -->
				<view class="function-text">
					<!-- 咨询室模块 start -->
					<!-- <view class="function-text-title">
						咨询室信息
					</view>
					<view class="function-text-box">
						<view class="function-text-box-img">
							<image class="function-text-box-img-img" src="/static/function/room.jpg" mode="widthFix">
							</image>
						</view>
						<view class="function-text-box-text">
							<view class="function-text-box-text-title">
								顺义后沙峪咨询室1
							</view>
							<view class="function-text-box-text-label">
								<view class="function-text-box-text-label-one">
									单人沙发
								</view>
								<view class="function-text-box-text-label-one">
									空调
								</view>
								<view class="function-text-box-text-label-one">
									桌子
								</view>
							</view>
							<view class="function-text-box-text-label-button">
								了解预约
							</view>
						</view>
					</view> -->
					<!-- 咨询室模块 end-->
					<!-- 课程模块 start -->
					<!-- <view class="function-text-title">
						课程信息
					</view>
					<view class="function-course-box">
						<view class="function-course-box-img">
							<image class="function-course-box-img-img" src="/static/function/course-one.png" mode="">
							</image>
						</view>
						<view class="function-course-box-text">
							<view class="function-text-box-text-title">
								顺义后沙峪咨询室1
							</view>
							<view class="function-course-box-text-label">
								<view class="function-course-box-text-label-one">
									<image class="function-course-box-text-label-one-img"
										src="/static/function/teacher.png" mode="widthFix"></image>
								</view>
								<view class="function-course-box-text-label-two">
									亚瑟·弗里曼博士
								</view>
								<view class="function-course-box-text-label-three">
									38节
								</view>
							</view>
							<view class="function-course-box-text-label-button">
								￥39.00
							</view>
						</view>
					</view> -->
					<!-- 课程模块 end -->
					<!-- 活动模块start -->
					<!-- <view class="function-text-title">
						活动信息
					</view>
					<view class="function-activity-box">
						<view class="function-activity-box-img">
							<image class="function-activity-box-img-img" src="/static/function/event.png" mode="">
							</image>
						</view>
						<view class="function-activity-box-text">
							<view class="function-activity-box-text-title">
								中国MBP科研动态展示与分享
							</view>
							<view class="function-activity-box-text-teacher function-activity-box-common">
								主持/主讲人：孙玉静
							</view>
							<view class="function-activity-box-text-time function-activity-box-common">
								活动时间：2025 6.20 - 2025 6.25
							</view>
							<view class="function-activity-box-text-button">
								活动报名
							</view>
						</view>
					</view> -->
					<!-- 活动模块end -->
				</view>
				<!-- 功能模块列表 end -->
			</view>
			<!-- 机构功能模块 end-->

		</view>
	</view>
</template>

<script>
	import Banner from '@/components/banner/banner.vue'
	import AgencyInfo from '@/components/agency-info/agency-info.vue'
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue';
	import {
		getAgencDetails,
		navigateToInsDetails
	} from '../../api/api.js'
	export default {
		components: {
			Banner,
			AgencyInfo
		},
		data() {
			return {
				// 轮播图数据
				banner: [],
				institution: [],
				utilityList: [{
						id: 1,
						img: "/static/function/introduction.png",
						url: '/pages/agency/insdetails',
					},
					{
						id: 2,
						img: "/static/function/recruitment.png",
						url: '/pages/recruitment/recruitment',
					},
					// {
					// 	id: 2,
					// 	img: "/static/function/consulting-room.png",
					// 	url: '',
					// },
					// {
					// 	id: 3,
					// 	img: "/static/function/course.png",
					// 	url: '',
					// },
					// {
					// 	id: 4,
					// 	img: "/static/function/activity.png",
					// 	url: '',
					// },
					// {
					// 	id: 5,
					// 	img: "/static/function/evaluation.png",
					// 	url: '',
					// },
					// {
					// 	id: 6,
					// 	img: '/static/function/psychological-counseling.png',
					// 	url: '',
					// }
				],
				shareType: 'default', // 分享类型标识
				shareId: '', // 分享内容ID
				shareMenuVisible: false // 分享菜单状态
			}
		},

		onLoad(options) {
			console.log(options, 'options');
			// 保存分享ID
			this.shareId = options.id;
			console.log(this.shareId, 'this.shareId----');
			this.getAgencDetailsData(this.shareId);
			// 显示分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// 页面加载时初始化分享菜单
			this.ensureShareMenu()
		},

		// 分享给朋友
		onShareAppMessage(res) {
			return {
				provider: 'weixin',
				scene: 'WXSceneSession', // 指定分享到微信好友
				title: this.institution.name,
				desc: '专业的心理咨询机构，提供优质的咨询服务', // 添加描述信息
				path: `/pages/agency/agency?id=${this.shareId}`,
				imageUrl: 'https://iepsy.oss-cn-beijing.aliyuncs.com/' + this.institution.logo,
				success: function(res) {
					console.log('分享成功', res);
				},
				fail: function(err) {
					console.log('分享失败', err);
				}
			};
		},

		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.institution.name,
				query: `id=${this.shareId}`,
				imageUrl: 'https://iepsy.oss-cn-beijing.aliyuncs.com/' + this.institution.logo,
				success: function(res) {
					console.log('分享到朋友圈成功', res);
				},
				fail: function(err) {
					console.log('分享到朋友圈失败', err);
				}
			};
		},

		methods: {
			/**
			 * 获取机构详情数据
			 */
			getAgencDetailsData(id) {
				console.log('🖼️ 获取机构详情数据...', id)
				getAgencDetails(id).then(res => {
					console.log('✅ 机构详情数据获取成功:', res);
					this.banner = res.img || [];
					this.institution = res || [];

				}).catch(error => {
					console.error('❌ 获取机构详情失败:', error);
					this.banner = [];
				});
			},

			// 导航到机构详情页
			async navigateToInsDetails(url, id) {
				// console.log(id,'id---跳转机构详情页id');
				// console.log(url,'url---跳转机构详情页url');
				try {
					// 显示加载提示
					uni.showLoading({
						title: '获取机构详情中...'
					});

					// 调用后端接口获取机构详情数据
					const insData = await navigateToInsDetails(url, id);
					// console.log('✅ 成功获取机构详情数据:', insData);

					// 存储数据到全局，供agency-info组件使用
					uni.setStorageSync('currentInsData', insData);
					// 导航到目标页面
					uni.navigateTo({
						url: `${url}?id=${this.shareId}`
					});
				} catch (error) {
					console.error('❌ 获取机构详情失败:', error);
					uni.showToast({
						title: '获取机构详情失败，请重试',
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 隐藏加载提示
					uni.hideLoading();
				}
			},
			// 处理来自agency-info组件的分享触发
			handleShare(type, id) {
				// console.log('触发分享功能', type, id);
				this.shareType = type;
				this.shareId = id;

				// 确保分享菜单已显示
				this.ensureShareMenu();

				// 如果已经指定了分享类型，直接调用对应分享
				if (type === 'appMessage' || type === 'timeline') {
					// 在实际应用中，这里可能需要根据不同平台做特殊处理
					// 由于Web环境限制，我们通过提示用户来模拟
					if (type === 'appMessage') {
						uni.showToast({
							title: '请点击右上角分享给朋友',
							icon: 'none',
							duration: 2000
						});
					} else if (type === 'timeline') {
						uni.showToast({
							title: '请点击右上角分享到朋友圈',
							icon: 'none',
							duration: 2000
						});
					}
				} else {
					// 否则显示分享选项菜单
					uni.showActionSheet({
						itemList: ['分享给朋友', '分享到朋友圈'],
						itemColor: '#000000',
						success: (res) => {
							this.shareType = res.tapIndex === 0 ? 'appMessage' : 'timeline';
							uni.showToast({
								title: res.tapIndex === 0 ? '请点击右上角分享给朋友' : '请点击右上角分享到朋友圈',
								icon: 'none',
								duration: 2000
							});
						},
						fail: (err) => {
							// console.log('分享面板弹出失败:', err);
						}
					});
				}
			},
			ensureShareMenu() {
				// 确保显示完整的分享菜单（包括朋友圈）
				// console.log('确保分享菜单显示');
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline'],
					success: () => {
						this.shareMenuVisible = true
						// console.log('分享菜单已显示（包含朋友圈）')
					},
					fail: (err) => {
						// console.log('显示分享菜单失败:', err);
					}
				})
			}

		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		height: 100%;
		background-color: #F8F8F8;
		margin-top: 194rpx;
	}

	/* 分享按钮样式 */
	.share-container {
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;
		z-index: 999;
	}

	.share-image {
		width: 120rpx;
		height: 120rpx;
	}

	/* 机构模块样式 start */
	.function-total {
		width: 715rpx;
		border-radius: 35rpx 35rpx 0rpx 0rpx;
		overflow: hidden;
		padding: 0rpx 15rpx 10rpx;
		background-color: #F8F8F8;
		/* margin: 0px 15rpx; */
	}

	.function {
		width: 710rpx;
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #efefef;
		border-left: 1px solid #efefef;
		background-color: #fff;
	}

	.function-model {
		width: 325rpx;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 20rpx 15rpx;
	}

	.function-model-img {
		width: 100%;
		height: 100%;
	}

	.function-model-img-img {
		width: 100%;
		height: 100%;
	}

	.function-model-title {
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	/* 机构咨询室模块样式 start */
	.function-text {
		width: 100%;
	}

	.function-text-title {
		font-size: 40rpx;
		padding: 45rpx 15rpx 25rpx;
	}

	.function-text-box {
		width: 100%;
		height: 285rpx;
		border-radius: 35rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		border: 1px solid #bbb;
		background-color: #fff;
	}

	.function-text-box-img {
		width: 45%;
		height: 235rpx;
		overflow: hidden;
		border-radius: 35rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */


	}

	.function-text-box-img-img {
		max-width: 100%;
		max-height: 100%;
	}

	.function-text-box-text {
		width: 55%;
	}

	.function-text-box-text-title {
		font-size: 30rpx;
		padding: 10rpx 0rpx 10rpx 20rpx;

	}

	.function-text-box-text-label {
		width: 100%;
		padding: 10rpx 20rpx;
	}

	.function-text-box-text-label-one {
		font-size: 20rpx;
		padding: 10rpx;
		border: 1rpx solid #E99D42;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		display: inline-block;
		border-radius: 15rpx;
		font-weight: 600;
	}

	/*  */
	.function-text-box-text-label-button {
		font-size: 35rpx;
		float: right;
		padding: 5rpx 15rpx;
		background-color: #A16222;
		color: #fff;
		display: inline-block;
		border-radius: 25rpx;
		font-size: 35rpx;
		margin-top: 25rpx;
	}

	/* 机构咨询室模块样式end */
	/* 机构课程模块样式 start */
	.function-course-box {
		width: 100%;
		height: 285rpx;
		border-radius: 35rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		border: 1px solid #bbb;
		background-color: #fff;
	}

	.function-course-box-img {
		width: 45%;
		height: 235rpx;
		overflow: hidden;
		border-radius: 35rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */

	}

	.function-course-box-img-img {

		max-width: 100%;
		max-height: 100%;
	}

	.function-course-box-text {
		width: 55%;
	}

	.function-course-box-text-title {
		font-size: 30rpx;
		padding: 10rpx 0rpx 10rpx 20rpx;

	}

	.function-course-box-text-label {
		width: 100%;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: flex-start;
	}

	.function-course-box-text-label-one {
		width: 30rpx;
		height: 30rpx;
	}

	.function-course-box-text-label-one-img {
		width: 30rpx;
		height: 30rpx;
	}

	.function-course-box-text-label-two {
		font-size: 25rpx;
		padding: 0rpx 10rpx;
		border-right: 1rpx solid #bbb;
	}

	.function-course-box-text-label-three {
		font-size: 25rpx;
		padding: 0rpx 10rpx;
		align-self: flex-end;

	}

	.function-course-box-text-label-one-img {
		width: 30rpx;
		height: 30rpx;
	}

	.function-course-box-text-label-button {
		font-size: 35rpx;
		float: right;
		padding: 5rpx 15rpx;
		background-color: #A16222;
		color: #fff;
		display: inline-block;
		border-radius: 25rpx;
		font-size: 35rpx;
		margin-top: 25rpx;
	}

	/* 机构课程模块样式 end */
	/* 机构活动模块样式 start */
	.function-activity-box {
		width: 695rpx;
		height: 800rpx;
		padding: 20rpx;
		border-radius: 35rpx;
		box-sizing: border-box;
		border: 1rpx solid #bbb;
		margin-bottom: 25rpx;
		background-color: #fff;
	}

	.function-activity-box-img {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 495rpx;

	}

	.function-activity-box-img-img {
		max-width: 100%;
		max-height: auto;
		border-radius: 35rpx 35rpx 0rpx 0rpx;
	}

	.function-activity-box-text-title {
		padding: 10rpx;
		text-align: center;
		font-size: 35rpx;
		font-weight: 600;
	}

	.function-activity-box-common {
		padding: 20rpx 0rpx 0rpx 30rpx;
		font-size: 30rpx;
		color: #bbb;
	}

	.function-activity-box-text-button {
		font-size: 35rpx;
		color: #fff;
		padding: 15rpx 25rpx;
		border-radius: 35rpx;
		float: right;
		background-color: #4095E5;


	}

	/* 机构活动模块样式 end */
	/* 机构内容模块样式 end*/
</style>